<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <div id="app">
      今天的计划:{{plan}}
      <button @click="change" > 改变天气</button><br />
      <button @click="number.a++">add</button>
      <input v-model:value="change"/>
    </div>
    <script>
      Vue.config.productionTip = false;
      let vm = new Vue({
        el: '#app',
        data: {
          plan: '',
          isSunny:true,
          number:{
            a:1,
            b:2,
          },
          change:1,
        },
        watch:{
          isSunny:{
            immediate:true,
            handler(){
              this.plan = this.isSunny?'打篮球':'敲代码';
            },
          },
          // 'number.a':{
          //   handler() {
          //     this.change=this.number.a;
          //   }
          // },
          number: {
            deep:true,
            handler(){
              this.change = 'this number was changed ';
            }
          },

        },


        methods:{
          change() {
            this.isSunny =!this.isSunny;
          }
        }
      });
    </script>
  </body>
</html>
